<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="site-title">凌宇音乐</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="navbar">
        <div class="logo">
            <i class="fas fa-music"></i>
            <span id="site-logo">凌宇音乐</span>
        </div>
        
        <!-- 主导航 -->
        <nav class="main-nav">
            <ul>
                <li><a href="#" class="nav-item active"><i class="fas fa-home"></i><span>首页</span></a></li>
                <li><a href="#" class="nav-item"><i class="fas fa-compass"></i><span>发现音乐</span></a></li>
                <li><a href="#" class="nav-item"><i class="fas fa-heart"></i><span>我的喜欢</span></a></li>
            </ul>
        </nav>
        
        <!-- 搜索框 -->
        <div class="search-container">
            <div class="search-bar">
                <input type="text" id="search-input" placeholder="搜索音乐、歌手、专辑...">
                <button id="search-btn"><i class="fas fa-search"></i></button>
            </div>
            <div id="search-results" class="search-results"></div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-container">
        <!-- 播放列表侧边栏 -->
        <aside id="playlist-sidebar" class="playlist-sidebar">
            <div class="playlist-header">
                <h2>播放列表</h2>
                <button id="close-playlist-btn" class="playlist-control-btn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <!-- 拖放上传区域 -->
            <div id="drop-area" class="drop-area">
                <i class="fas fa-music"></i>
                <p>拖放音乐文件到此处，或<span class="upload-text">点击上传</span></p>
                <small>支持 MP3、FLAC、WAV 等格式</small>
            </div>
            
            <!-- 音乐列表容器 -->
            <div id="music-list" class="music-list"></div>
        </aside>
        
        <!-- 主内容区域 -->
        <section class="content-wrapper">
            <!-- 音乐详情区域 -->
            <section class="player-container">
            <!-- 专辑封面 -->
            <div class="album-cover">
                <img id="current-cover" src="assets/default-cover.png" alt="专辑封面">
                <div class="album-disc"></div>
            </div>

            <!-- 歌曲信息 -->
            <div class="song-info">
                <h3 id="current-title" class="song-title">歌曲名称</h3>
                <p id="current-artist" class="song-artist">艺术家</p>
            </div>

            <!-- 歌词显示 -->
            <div class="lyrics-container">
                <div id="lyrics" class="lyrics">
                    <!-- 歌词将通过JavaScript动态加载 -->
                </div>
            </div>

            <!-- 进度条 -->
            <div class="progress-container">
                <span id="current-time" class="time-display">0:00</span>
                <div class="progress-bar">
                    <div id="progress" class="progress"></div>
                    <div class="progress-tooltip">
                        <span id="tooltip-time">0:00</span>
                        <div class="tooltip-arrow"></div>
                    </div>
                </div>
                <span id="duration" class="time-display">0:00</span>
            </div>

            <!-- 控制按钮 -->
            <div class="controls">
                <button id="prev-btn" class="control-btn"><i class="fas fa-step-backward"></i></button>
                <button id="play-btn" class="control-btn play-btn"><i class="fas fa-play"></i></button>
                <button id="next-btn" class="control-btn"><i class="fas fa-step-forward"></i></button>
                <button id="play-mode-btn" class="control-btn" title="切换播放模式"><i class="fas fa-random"></i></button>
            </div>

            <!-- 音量控制 -->
            <div class="volume-container">
                <i class="fas fa-volume-down"></i>
                <div class="volume-bar">
                    <div id="volume-progress" class="volume-progress"></div>
                </div>
                <i class="fas fa-volume-up"></i>
            </div>
        </section>
        
        <!-- 音乐列表切换按钮 -->
        <button id="toggle-playlist-btn" class="toggle-playlist-btn">
            <i class="fas fa-list"></i>
        </button>
    </section>
    </main>



    <!-- 底部固定播放器 -->
    <div class="bottom-player">
        <div class="player-info">
            <img id="mini-cover" src="assets/default-cover.png" alt="专辑封面">
            <div class="mini-info">
                <h4 id="mini-title">歌曲名称</h4>
                <p id="mini-artist">艺术家</p>
            </div>
            <button id="mini-like-btn" class="mini-btn"><i class="far fa-heart"></i></button>
        </div>
        <div class="player-controls">
            <button id="mini-prev-btn" class="mini-btn"><i class="fas fa-step-backward"></i></button>
            <button id="mini-play-btn" class="mini-play-btn"><i class="fas fa-play"></i></button>
            <button id="mini-next-btn" class="mini-btn"><i class="fas fa-step-forward"></i></button>
        </div>
        <div class="player-progress">
            <div class="progress-bar">
                <div id="mini-progress" class="progress"></div>
            </div>
            <span id="mini-current-time" class="mini-time">0:00</span>
            <span id="mini-duration" class="mini-time">0:00</span>
        </div>
        <div class="player-extra">
            <div class="mini-volume">
                <i class="fas fa-volume-down"></i>
                <div class="volume-bar">
                    <div id="mini-volume-progress" class="volume-progress"></div>
                </div>
            </div>
            <!-- 播放列表按钮 -->
            <button id="show-playlist-btn" class="mini-btn">
                <i class="fas fa-list"></i>
            </button>
        </div>
    </div>

    <!-- 底部版权信息 -->
    <footer class="footer">
        <p>&copy; 2025 凌宇音乐</p>
    </footer>

    <!-- 音频元素 -->
    <audio id="audio" preload="metadata"></audio>

    <!-- 音乐播放器相关功能 -->
    <!-- 注意：lyrics.js必须在app.js之前加载，因为app.js依赖其中的函数 -->
    <script src="js/config.js"></script>
    <script src="js/lyrics.js"></script>
    <script src="js/app.js"></script>
    <!-- 初始化网站名称 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 更新网站标题和logo
            if (typeof config !== 'undefined' && config.siteName) {
                document.getElementById('site-title').textContent = config.siteName;
                document.getElementById('site-logo').textContent = config.siteName;
            }
        });
    </script>
    <script src="js/player.js"></script>
    <script src="js/search.js"></script>
    
    <!-- 歌词功能已修复，调试按钮已移除 -->
</body>
</html>